<template>
	<div class="home">
		<div class="header">
			<span class="title">
				
			</span>
		</div>
		<div class="tab">
			<span 
			class="tab-link" 
			v-for="(value, index) in list"
			 :class="{'active':ind === index}"
			@click='handleClickItem(index,value.key)'
			>{{value.name}}</span>
		</div>
		<scroll 
		class='content' 
		:pullup='isEnd' 
		:pulldown=true 
		@pulldown=pulldown 
		@scrollToEnd=scrollToEnd
		>
			<ul class="list">
				<li class="prompt" :class={dis:isPrompt} v-if=newsList.length>为您更新了{{newsList.length}}条新闻</li>
				<li 
				v-for='item of newsList'
				class="item" 
				>
					<div class="item_detail_desc" :class="item.image_url?'oneImg':''">
						<router-link 
						class="title"
						 tag='h3'
						 :to= "{name:'NewsDetail',params:{id:item.source_url}}"
						 >{{item.title}}</router-link>
						<div class="author-info" v-if='item.image_list.length<=0'>
							<span v-if=item.label>{{item.label}}</span>
							<span>{{item.media_name}}</span>
							<span>评论:{{item.comment_count}}</span>
						</div>
					</div>
					<div class="list_img_holder" :class="item.image_url?'one-img':''">
						<img :src="value.url" alt="" v-for='(value) in item.image_list'>
						<img :src="item.image_url" alt="" v-if=item.image_url class="img-s">
					</div>
					<div class="author-info" v-if='item.image_list.length>0'>
						<span v-if=item.label>{{item.label}}</span>
						<span>{{item.media_name}}</span>
						<span>评论:{{item.comment_count}}</span>
					</div>
				</li>
			</ul>
			<load v-if=isLoading></load>
		</scroll>
		
	</div>
</template>
<script>
	import {getNewsList} from '@/api/ajax.js'
	import Scroll from '@/public/scroll'
	import Load from '@/public/load'
	export default{
		components:{
			Scroll,
			Load
		},
		data(){
			return {
				list:[{'name':'推荐','key':'__all__'},
                    {'name':'热点','key':'news_hot'},
                    {'name':'社会','key':'news_society'},
                    {'name':'娱乐','key':'news_entertainment'},
                    {'name':'科技','key':'news_tech'},
                    {'name':'汽车','key':'news_car'},
                    {'name':'体育','key':'news_sports'},
                    {'name':'财经','key':'news_finance'},
                    {'name':'军事','key':'news_military'},
                    {'name':'国际','key':'news_world'},
                    {'name':'时尚','key':'news_fashion'}],
				ind:0,
				newsList:[],
				isPrompt:true,
				isLoading:false,
				timer:null,
				//向下加载
				isEnd:true
			}
		},
		methods:{
			handleClickItem(index,key){
				this.ind = index
				//在引入的获取数据的函数中，this指向变化，所以将this赋值给that
				const that = this
				getNewsList(key,function(data){
					that.newsList = data.data
					console.log(that.newsList)
					//设置弹出来的提示与清除提示。
					clearTimeout(that.timer)
					that.isPrompt = false;
					that.timer=setTimeout(()=>{
							that.isPrompt = true
						},1000)
				})
			},
			pulldown(){
				let key = this.list[this.ind].key
				const that = this
				getNewsList(key,function(data){
					that.newsList = data.data
					//设置弹出来的提示与清除提示。
					clearTimeout(that.timer)
					that.isPrompt = false;
					that.timer=setTimeout(()=>{
							that.isPrompt = true
						},1000)
				})
			},
			scrollToEnd(){
				this.isEnd = false 
				let key = this.list[this.ind].key
				const that = this
				this.isLoading = true
				getNewsList(key,function(data){
					that.newsList = that.newsList.concat(data.data)
					let n = []
					for(let i = 0 ; i < that.newsList.length ; i++){
						let flag = true 
						for(let j = 0 ; j < n.length ; j++){
							if(that.newsList[i].title==n[j].title){
								flag = false
							}
						}
						if(flag){
							n.push(that.newsList[i])
						}
					}
					console.log(n)
					that.newsList = n
					that.isLoading = false
				})
			}
		},
		created	(){
			const that = this
			getNewsList('__all__',function(data){
				that.newsList = data.data
				console.log(that.newsList)
			})
		},
		updated(){
			console.log('模板更新')
			this.isEnd = true
		}
	}
</script>
<style scoped lang="stylus">
	.home .header{
		height: .88rem;
	    color: #fff;
	    font-size: .4rem;
	    font-weight: bold;
	    text-align: center;
	    line-height: .88rem;
	    background-color: #d43d3d;
	}
	.home .header .title{
		display: flex;
		height: 100%;
	    background: url(//s3b.pstatp.com/growth/mobile_list/image/wap_logo@3x_581de69e.png) no-repeat  center;
	    background-size: 1.66rem !important;
	}
	.tab{
		height: .74rem;
		overflow: hidden;
		overflow-x: scroll;
		background-color: #f4f5f6;
	  white-space: nowrap;
	  font-size: 0;
	}
	.tab-link{
	    display: inline-block;
	    height: .5rem;
		line-height: .74rem;
		padding:0 .2rem; 
		margin-left: .1rem;
	    font-size: .34rem;
	}
	.tab::-webkit-scrollbar {display:none}
	.tab-link.active{
		color: #f85959;
	}
	.content{
		position: absolute;
		left: 0;
		right: 0;
		top: 1.6rem;
		width: 100%;
		bottom: .6rem;
		background-color: #fff;
		overflow: hidden;
	}
	.list{
		padding: 0 .3rem;
	}
	.list .prompt{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: .6rem;
		line-height: .6rem;
		background-color: rgba(120,196,236,.6);
		text-align: center;
		color: #0D2E61;
	}
	.list .prompt.dis{
		display: none;
	}
	.item{
		padding: .32rem 0;
		border-bottom: 1px solid rgba(221, 221, 221, 0.6)
	}
	.item_detail_desc.oneImg{
		display: inline-block;
	    width: 67%;
	        vertical-align: middle
		box-sizing: border-box;
	}
	.title{
		line-height: .4rem;
		color: #585151;
		font-size: .34rem
	    font-family: 'STHeiti', 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif;
	}
	.list_img_holder{
		display: flex;
		margin-top: .2rem;
	}
	.list_img_holder.one-img{
	    width: 30%;
	    display: inline-block;
	    margin-top: 0rem;
	    vertical-align: middle;
		box-sizing: border-box;
	}
	.list_img_holder img{
		width: 33%;
		height: 1.8rem;
		padding-left: .04rem;
	}
	.list_img_holder .img-s{
		width: 100%;
		height: 1.5rem;
	}
	.author-info{
		display: inline-block;
	    font-size: .24rem;
	    color: #b5b5b5;
	    margin-top: .2rem;
	    margin-bottom: .04rem
	}

</style>